<template>
  <div class="common-drawer">
    <t-drawer
      v-bind="$attrs"
      ref="drawerRef"
      :size="size"
      :footer="footer"
      :class="{ 'show-overlay': $attrs['show-in-attached-element'] }"
    >
      <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
        <slot :name="slotName" v-bind="slotProps || {}"></slot>
      </template>
      <!-- 重新 header 插槽 -->
      <template #header>
        <div class="drawer-header-wrap">
          <span>{{ title }}</span>
          <div class="drawer-header-operation">
            <t-space :size="10">
              <slot name="operation"></slot>
            </t-space>
            <t-button
              v-if="refreshBtn"
              block
              variant="text"
              size="small"
              class="drawer-header-refresh-button"
              @click="refreshHander"
            >
              <t-icon name="refresh" />
            </t-button>
          </div>
        </div>
      </template>
    </t-drawer>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'CommonDrawer',
  inheritAttrs: false,
});

const { title } = defineProps({
  title: {
    type: String,
    default: '',
  },
  size: {
    type: String,
    default: '640',
  },
  // 是否显示footer信息
  footer: {
    type: Boolean,
    default: false,
  },
  // 是否显示右上角刷新按钮
  refreshBtn: {
    type: Boolean,
    default: true,
  },
});

// 属性和事件
const $attrs = useAttrs();

// 插槽
const $slots = useSlots();
// 方法  注意这里哦，挂载完才能获取到组件
const drawerRef = ref();
const expose = {};

// 事件
const emit = defineEmits(['refresh']);

onMounted(() => {
  const entries = Object.entries(drawerRef.value);
  // 遍历，将方法全部都放在expose上
  for (const [method, fn] of entries) {
    (expose as any)[method] = fn;
  }
});
// 暴露expose上的方法
defineExpose(expose);

// 刷新封装
const refreshHander = () => {
  emit('refresh');
};
</script>

<style lang="less" scoped>
.common-drawer {
  :deep(.show-overlay) {
    z-index: unset;

    .t-drawer__mask {
      background-color: transparent;
    }

    .t-drawer__content-wrapper {
      z-index: 1500;
    }
  }

  .drawer-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .drawer-header-operation {
      display: flex;
      align-items: center;

      .drawer-header-refresh-button {
        margin-left: 10px;
      }
    }
  }
}
</style>
